<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="./css/reset.css" />
	<style>
		.a:link {
			color: blue;
		}

		.a:visited {
			color: pink;
		}


		/* 当鼠标悬浮在按钮上 */

		.custom-button:hover {
			background-color: gray;
			color: white;
		}

		/* 当按钮获取焦点的时候 */
		.custom-button:focus {
			border-color: blue;

			/* 移除默认轮廓并用蓝色边框代替 */
			outline: none;

		}

		/* 当按钮被激活时（被点击） */
		.custom-button:active {
			background-color: darkgray;
			border-color: darkblue;
		}
	</style>
</head>

<body>
	<a class="a" target="_blank" href="https://www.baidu.com">我是一个链接</a>

	<div></div>
	<button class="custom-button">点击我</button>
	<input type="text" class="custom-button">










	<div>
		<input type="checkbox" id="check-all" />
		<label for="check-all">全选</label>
	</div>
	  <div>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项1</label>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项2</label>
		  <input type="checkbox" class="checkbox-item" />
		  <label >选项3</label>
		    </div>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			var checkAll = document.getElementById('check-all');
			var checkboxes = document.querySelectorAll('.checkbox-item')
			function updateCheckAll() {
				var checkedCount = 0;
				checkboxes.forEach(function (checkbox) {
					if (checkbox.checked) checkedCount++
				});
				checkAll.checked = checkedCount === checkboxes.length;
				checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
				
			}


			checkAll.addEventListener('change', function () {
				checkboxes.forEach(function (checkbox) {
					checkbox.checked = checkAll.checked;
				});
				checkAll.indeterminate = false;
			});

			checkboxes.forEach(function (checkbox) {
				checkbox.addEventListener('change', updateCheckAll);
			})
		})
	</script>






</body>

</html>